<template>
    <baidu-map class="map"
               :ak="ak"
               :center="centerPoint"
               :zoom="zoom"
               :mapStyle="mapStyle"
               :scroll-wheel-zoom="wheelZoom"
               @ready="initMap">
        <bm-marker v-for="(marker, i) in markers"
                   :massClear="massClear"
                   :position="getPoint(marker.coordinate)"
                   :dragging="marker.dragging || dragging"
                   :icon="marker.icon || markerIcon || false"
                   :title="marker.title"
                   :key="marker.id"
                   @click="openInfoWindow(i)">
            <bm-info-window
                :show="show === i"
                @close="closeInfoWindow"
                @open="openInfoWindow(i)">
                <h4>{{clearSpanTag(marker.title)}}</h4>
                <p>{{clearSpanTag(marker.address)}}</p>
                <p>{{clearSpanTag(marker.tel)}}</p>
            </bm-info-window>
        </bm-marker>
        <bm-navigation :anchor="anchor"></bm-navigation>
    </baidu-map>
</template>

<script>
    import {BaiduMap, BmMarker, BmInfoWindow, BmLabel, BmNavigation} from 'vue-baidu-map'
	export default {
		name: 'b-map',
        components: {
            BaiduMap,
            BmMarker,
            BmInfoWindow,
            BmLabel,
            BmNavigation
        },
        props: {
            ak: {
                type: String,
                required: true
            },
            controler:{
                type: Number,
                default: 0
            },
            zoom: {
                type: Number,
                default: 16
            },
            markers: {
                type: Array,
                default: []
            },
            markerIcon: {
                type: [Object, Boolean],
                default: false
            },
            massClear: {
                type: Boolean,
                default: true
            },
            dragging: {
                type: Boolean,
                default: false
            },
            wheelZoom: {
                type: Boolean,
                default: true
            },
            mapStyle: Object,
            
        },
        data() {
            return {
                show: -1,
            }
        },
        created() {
            // console.log(this.markers);
        },
        computed: {
		    centerPoint: function(){
		        if(!this.markers[0]){
		           return;
                }
		        return this.getPoint(this.markers[0].coordinate);
		    },
            anchor: function(){
                return [
                    'BMAP_ANCHOR_TOP_LEFT',
                    'BMAP_ANCHOR_TOP_RIGHT',
                    'BMAP_ANCHOR_BOTTOM_LEFT',
                    'BMAP_ANCHOR_BOTTOM_RIGHT'
                ][this.controler];
            }
        },
        methods: {
            getPoint(coordinate) {
                let point = coordinate.split(',');
                return {
                    lng: point[0],
                    lat: point[1]
                };
            },
            initMap() {
                // this.centerPoint = this.getPoint(this.markers[0].coordinate);
            },
            openInfoWindow(i) {
                this.show = i;
            },
            closeInfoWindow() {
                this.show = -1;
            },
            clearSpanTag(str){
                return str.replace(/\<\/?\s*span\s*>/ig, '');
            }
        }
	}
</script>

<style lang="scss" scoped>

    .map{
        width: 100%;
        height: 100%;
    }
    
</style>
